<template>
  <div class="address" @click="$router.push('/dizi')">
    <!-- 有地址 -->
    
    <div class="have-address" v-if="info.username">
      <div class="name">{{ info.username }} {{ info.userphone }}</div>
      <div class="info">
        <span class="default" v-if="info.status == 1">默认</span>
        <span class="label">{{ info.label }}</span>
        <span>{{ info.location + info.useraddress }}</span>
      </div>
    </div>
    <!-- 无地址 -->
    <div class="no-address" v-else>
      <van-button type="primary">点击完善收获地址</van-button>
    </div>
  </div>
</template>

<script>
import { reqAddressList } from "../../../http/api";
export default {
  data() {
    return {
      // 1.地址的初始值
      info: {},
    };
  },
  mounted() {
    // 2.一进来就要请求地址的数据 // '/order' '/order?addressId=37'

    if (this.$route.query.addressId) {
      // 如果地址栏是 '/order?addressId=37' ，请求地址是37号的地址
      reqAddressList({
        id: this.$route.query.addressId,
        uid: JSON.parse(localStorage.getItem("isLogin")).uid,
      }).then((res) => {
        if (res.data.code == 200) {
          this.info = res.data.list[0];
        }
      });
    } else {
      // 如果地址栏是 '/order' ，请求默认地址;用户有可能设置过默认地址，也可能没有默认地址。
      reqAddressList({
        uid: JSON.parse(localStorage.getItem("isLogin")).uid,
        status: 1,
      }).then((res) => {
        if (res.data.code === 200) {
          if(res.data.list.length>0&&res.data.list.every(item=>item.status===1)){
            this.info=res.data.list[0]
          }

        }
      });
    }
  },
  methods: {},
};
</script>

<style lang="less">
@import "../../../less/index.less";
.address {
  border-bottom: 1px solid @border-color;
  padding-bottom: @padding20;
}
.have-address {
  .name {
    font-size: @h3;
    color: @font-color3;
    padding: @padding10;
  }
  .info {
    font-size: @p;
    color: @font-color6;
    overflow: hidden;
    span {
      float: left;
      padding: @padding10;
    }
    .default {
      color: @primary;
      border: 1px solid @primary;
      margin: 0px @margin20;
      border-radius: @margin20;
    }
    .label {
      color: @deep;
      border: 1px solid @primary;
      margin: 0px @margin20;
      border-radius: @margin20;
    }
  }
}
.no-address {
  text-align: center;
  height: 2rem;
}
</style>